<template>
  <div class="news">
    <h3>News</h3>
    <!-- query传参 -->
    <router-link tag="button" :to="{
      name:'NewsDetail',
      query:{
        name:'国内'
      }
    }">国内新闻</router-link>

    <router-link tag="button" :to="{
      name:'NewsDetail',
      query:{
        name:'国际'
      }
    }">国际新闻</router-link>

    <router-link tag="button" :to="{
      name:'NewsDetail',
      query:{
        name:'武汉'
      }
    }">武汉新闻</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "News",
  mounted() {
    console.log("News mounted");
  },
  beforeDestroy() {
    console.log("News beforeDestroy");
  },
};
</script>

<style scoped>
.news {
  background-color: aqua;
}
</style>
